<template>
  <div class="personalThoughts">
    <el-card shadow="hover">
      <div class="searchBox">
        <div class="itemBox">
          <el-input placeholder="请输入用户ID/手机号" v-model="content">
            <template slot="prepend">用户ID/手机号</template>
          </el-input>
          <!-- <el-input placeholder="请输入手机号" v-model="phone">
            <template slot="prepend">手机号</template>
          </el-input> -->
          <el-input placeholder="请输入审核序号" v-model="number">
            <template slot="prepend">审核序号</template>
          </el-input>
          <el-button class="btn" @click="ideaSearchBtn">查找搜索</el-button>
        </div>
      </div>
      <div class="p">
        <!-- <p :class="{ active: index == 0 }" @click="activeStatusA()">未审核</p>
        <p :class="{ active: index == 1 }" @click="activeStatusB()">已审核</p> -->
        <div>
          <el-radio-group v-model="index" fill="#39383D" @change="indexChange">
            <el-radio-button :label="0">未审核</el-radio-button>
            <el-radio-button :label="1">已审核</el-radio-button>
            <el-radio-button :label="2">推荐中</el-radio-button>
          </el-radio-group>
          <el-select
            v-model="value"
            placeholder="请选择审核结果"
            v-if="index == 1"
            @change="auditChange"
          >
            <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
          <span style="margin-left: 10px">{{ "推荐中：" + recommendNum }}</span>
        </div>
        <span class="rgsh">
          <el-button @click="getList" size="small">刷新</el-button>
          人工审核
          <el-switch
            v-model="shbol"
            active-color="#13ce66"
            inactive-color="#CCC"
            @change="shChange"
          >
          </el-switch>
        </span>
      </div>

      <!-- 未审核 -->
      <div>
        <el-table :data="tableDataA" style="width: 100%">
          <el-table-column prop="id" label="序号"> </el-table-column>
          <el-table-column prop="createTime" label="提交时间">
          </el-table-column>
          <el-table-column
            prop="auditTime"
            label="审核时间"
            :key="Math.random()"
            v-if="index == 1"
          >
          </el-table-column>
          <el-table-column prop="userId" label="用户ID"> </el-table-column>
          <el-table-column prop="nickname" label="用户昵称"> </el-table-column>
          <el-table-column prop="content" label="审核内容"> </el-table-column>
          <el-table-column prop="medias" label="想法附件">
            <template slot-scope="scope">
              <!-- <span v-for="i in scope.row.medias" :key="i.index">
                <a target="_blank" :href="i.path">{{ i.path }}</a>
              </span> -->
              <div v-if="scope.row.medias.length != 0">
                <el-badge
                  :value="scope.row.medias.length"
                  class="item"
                  type="info"
                  v-if="scope.row.medias[0].mediaType == 1"
                >
                  <el-image
                    style="width: 80px; height: 100px"
                    :src="scope.row.medias[0].path"
                    :preview-src-list="srcList(scope.row.medias)"
                  >
                  </el-image>
                </el-badge>
                <a
                  v-else
                  class="link"
                  :href="scope.row.medias[0].path"
                  target="_blank"
                  ><i class="el-icon-caret-right"></i>
                </a>
              </div>
            </template>
          </el-table-column>
          <el-table-column
            prop="status"
            label="审核状态"
            :key="Math.random()"
            v-if="index == 0"
          >
            <template slot-scope="scope">
              {{
                scope.row.status == 0
                  ? "待审核"
                  : scope.row.status == 1
                  ? "已通过"
                  : "未通过"
              }}
            </template>
          </el-table-column>
          <el-table-column
            prop="audit_info"
            label="审核结果"
            :key="Math.random()"
            v-if="index == 1"
          >
            <template slot-scope="scope">
              {{
                scope.row.status == 0
                  ? "待审核"
                  : scope.row.status == 1
                  ? "已通过"
                  : scope.row.status == 2
                  ? "已封禁"
                  : "已删除"
              }}
            </template>
          </el-table-column>
          <el-table-column prop="is_recommend" label="推荐状态">
          </el-table-column>
          <el-table-column prop="address" label="处理" width="240">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="info"
                plain
                @click="noBtn(scope.row)"
                :disabled="index != 0 && scope.row.status != 1"
                >{{ index == 0 ? "不通过" : "处理" }}</el-button
              >
              <el-button
                v-if="index == 0"
                size="mini"
                type="success"
                plain
                @click="adoptdBtn(scope.row)"
                >通过</el-button
              >
              <el-button size="mini" @click="personalThoughtsDetails(scope.row)"
                >详情</el-button
              >
              <el-button
                size="mini"
                type="success"
                v-if="scope.row.is_recommend == 0"
                plain
                @click="setRecommendStatus(scope.row.id, '1')"
                >推荐</el-button
              >
              <el-button
                size="mini"
                type="warning"
                v-if="scope.row.is_recommend == 1"
                plain
                @click="setRecommendStatus(scope.row.id, '0')"
                >取消推荐</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="total > 0"
          :total="total"
          :page.sync="page"
          :limit.sync="pageSize"
          @pagination="getList"
        />
      </div>
      <!-- 已审核 -->

      <!-- 不通过按钮弹框 -->
      <el-dialog
        :title="index == 0 ? '审核反馈' : '审核处理'"
        center
        :visible.sync="dialogVisible"
        width="34%"
      >
        <div>
          <p>
            <span>用户ID</span>
            <el-input
              v-model="userId"
              disabled
              placeholder="请输入内容"
            ></el-input>
          </p>
          <p>
            <span>用户昵称</span>
            <el-input
              v-model="nickname"
              disabled
              placeholder="请输入内容"
            ></el-input>
          </p>
          <p>
            <span>审核处理</span>
            <el-radio v-model="auditProcessingRadio" label="1"
              >删除想法</el-radio
            >
            <el-radio v-model="auditProcessingRadio" label="2"
              >账号封禁</el-radio
            >
          </p>
          <p>
            <span>违规原因</span>
            <el-radio-group v-model="violationRadio">
              <el-radio v-for="i in radioList" :key="i.id" :label="i.id">{{
                i.name
              }}</el-radio>
            </el-radio-group>
          </p>
          <p v-show="auditProcessingRadio == 2">
            <span>封禁时间</span>
            <el-radio v-model="closureTimeRadio" label="1">1天</el-radio>
            <el-radio v-model="closureTimeRadio" label="3">3天</el-radio>
            <el-radio v-model="closureTimeRadio" label="7">7天</el-radio>
            <el-radio v-model="closureTimeRadio" label="0">永久</el-radio>
          </p>
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="feedbackConfirmationBtn"
            >确 定</el-button
          >
        </span>
      </el-dialog>

      <!-- 通过按钮弹框 -->
      <!-- <el-dialog
        title=""
        :visible.sync="adoptdDialogVisible"
        width="20%"
        center
      >
        <div class="adoptdBox">
          <span>通过想法，是否推荐此条想法</span>
          <p>
            <el-radio v-model="adoptdRadio" label="0">否</el-radio>
            <el-radio v-model="adoptdRadio" label="1">是</el-radio>
          </p>
        </div>

        <span slot="footer" class="dialog-footer">
          <el-button @click="adoptdDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="notApprovedBtn">确 定</el-button>
        </span>
      </el-dialog> -->

      <!-- 详情弹框 -->
      <el-dialog title="详情" :visible.sync="detailsBol" width="60%" center>
        <Details
          :type="index"
          :info="detailInfo"
          @colse="close"
          @chuli="chuli"
        />
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import Pagination from "@/components/Pagination"; // 分页
import {
  shUserIdeaShList,
  shUserIdeaSh,
  systemIdeaShOpen,
  shSetRecommendStatus,
} from "@/api/AuditManagement";
import { userBanReasonList } from "@/api/UserManagement";
import Details from "./PersonalThoughtsDetails.vue";

export default {
  components: { Pagination, Details },
  inject: ["reload"],
  data() {
    return {
      shbol: true,
      index: 0,
      content: "",
      // phone: "",
      number: "",
      recommendNum: "",
      //未审核
      tableDataA: [],
      total: 0,
      page: 1, //页码
      pageSize: 10, //每页条数
      dialogVisible: false, //不通过按钮弹框
      rowId: "",
      userId: "", //用户ID弹框
      nickname: "", //用户昵称弹框
      auditProcessingRadio: "", //审核处理弹框
      violationRadio: "", //违规原因弹框
      closureTimeRadio: "", //封禁时间天数
      radioList: [], //封禁账号值

      adoptdDialogVisible: false, //通过按钮弹框
      adoptdRadio: "", //通过按钮选择是与否

      //已审核

      //已审核状态选择下拉框
      options: [
        {
          value: "0",
          label: "全部审核状态",
        },
        {
          value: "1",
          label: "已通过",
        },
        {
          value: "2",
          label: "已封禁",
        },
        {
          value: "3",
          label: "已删除",
        },
      ],
      value: "0",
      detailsBol: false,
      detailInfo: {},
    };
  },
  methods: {
    //未审核TAB切换
    activeStatusA() {
      this.index = 0;
      shUserIdeaShList({
        page: this.page,
        pageSize: this.pageSize,
        status: this.index, //0.待审核 1.已审核
        content: this.content, //搜索内容
        number: this.number, //搜索序号
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.total = res.data.total;
          for (let i = 0; i < this.tableDataA.length; i++) {
            var item = this.tableDataA[i];
            if (item.status == 0) {
              item.status = "待审核";
            } else if (item.status == 1) {
              item.status = "已通过";
            } else {
              item.status = "未通过";
            }
          }
        }
      });
    },
    //未审核不通过按钮
    noBtn(row) {
      this.rowId = row.id;
      this.userId = row.userId;
      this.nickname = row.nickname;
      this.auditProcessingRadio = "1";
      this.violationRadio = 1;
      this.closureTimeRadio = "1";
      this.dialogVisible = true;
      userBanReasonList({}).then((res) => {
        if (res.code == 0) {
          this.radioList = res.data;
        }
      });
    },
    //未审核不通过 确认按钮
    feedbackConfirmationBtn() {
      shUserIdeaSh({
        id: this.rowId,
        ban: 2, //1.通过 2.违规
        reasonType: this.violationRadio, //违规原因
        type: this.auditProcessingRadio, //1.删除想法  2封禁账号
        days: this.closureTimeRadio, //封禁天数
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "操作成功！",
            type: "success",
          });
          this.getList();
          this.dialogVisible = false;
        }
      });
    },
    //未审核 通过按钮
    adoptdBtn(row) {
      this.$confirm("是否通过该想法?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          shUserIdeaSh({
            id: row.id,
            ban: 1, //1.通过 2.违规
            reasonType: 1,
          }).then((res) => {
            if (res.code == 0) {
              this.$message({
                message: "操作成功！",
                type: "success",
              });
              this.getList();
              this.dialogVisible = false;
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });

      // this.userId = row.userId;
      // this.adoptdDialogVisible = true;
    },
    //未审核通过确认按钮
    notApprovedBtn() {
      shUserIdeaSh({
        id: this.userId,
        ban: this.adoptdRadio, //1.通过 2.违规
        reasonType: "", //违规原因
        type: "", //1.删除想法  2封禁账号
        days: "", //封禁天数
      }).then((res) => {
        if (res.code == 0) {
          this.$message({
            message: "通过成功",
            type: "success",
          });
          this.getList();
          this.adoptdDialogVisible = false;
        }
      });
    },
    //详情按钮
    personalThoughtsDetails(obj) {
      // this.$router.push("/AuditManagement/PersonalThoughtsDetails");
      this.detailInfo = obj;
      this.detailsBol = true;
    },
    indexChange() {
      if (this.index == 0) {
        this.value = "0";
      }
      this.getList();
    },
    auditChange() {
      this.page = 1;
      this.getList();
    },
    async setRecommendStatus(id, recommend) {
      const res = await shSetRecommendStatus({
        id,
        recommend,
      });
      if (res.code == 0) {
        this.$message({
          type: "success",
          message: "操作成功！",
        });
        this.getList();
      }
    },
    //未审核分页
    getList() {
      shUserIdeaShList({
        page: this.page,
        pageSize: this.pageSize,
        status: this.index, //0.待审核 1.已审核
        content: this.content, //搜索内容
        number: this.number, //搜索序号
        auditType: this.value,
      }).then((res) => {
        if (res.code == 0) {
          this.tableDataA = res.data.list;
          this.total = res.data.total;
          this.recommendNum = res.data.recommendNum;
          //更新菜单上的红点信息
          this.$store.dispatch("badge/updateValue");
        }
      });
    },

    //已审核
    activeStatusB() {},
    //想法搜索
    ideaSearchBtn() {
      this.page = 1;
      this.getList();
    },
    close() {
      this.detailsBol = false;
      this.getList();
    },
    chuli(obj) {
      // console.log(obj);
      this.detailsBol = false;
      this.noBtn(obj);
    },
    //获取人工审核状态
    getSystemIdeaShOpen() {
      systemIdeaShOpen({
        get: 1,
        type: 1,
        review: 1,
      }).then((res) => {
        if (res.code == 0) {
          if (res.data.review === 0) {
            this.shbol = false;
          } else {
            this.shbol = true;
          }
        }
      });
    },
    shChange(value) {
      if (value) {
        this.$confirm("此操作将开启人工审核, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            systemIdeaShOpen({
              get: 2,
              review: 1,
              type: 1,
            }).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "开启成功！",
                });
                this.getSystemIdeaShOpen();
              }
            });
          })
          .catch(() => {
            this.shbol = false;
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      } else {
        this.$confirm("此操作将关闭人工审核, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        })
          .then(() => {
            systemIdeaShOpen({
              get: 2,
              review: 0,
              type: 1,
            }).then((res) => {
              if (res.code == 0) {
                this.$message({
                  type: "success",
                  message: "关闭成功！",
                });
                this.getSystemIdeaShOpen();
              }
            });
          })
          .catch(() => {
            this.shbol = true;
            this.$message({
              type: "info",
              message: "已取消",
            });
          });
      }
    },
  },
  created() {
    this.getList();
    this.getSystemIdeaShOpen();
  },
  computed: {
    srcList: () => {
      return (arr) => {
        let list = [];
        arr.forEach((item) => {
          if (item.mediaType == 1) {
            list.push(item.path);
          }
        });
        return list;
      };
    },
  },
};
</script>

<style lang="less" scoped>
.personalThoughts {
  margin: 30px;
  height: 100%;
  .searchBox {
    display: flex;
    margin-bottom: 20px;
    justify-content: space-between;
    .itemBox {
      display: flex;
      .el-input {
        margin-right: 20px;
        width: 320px;
      }
    }
  }
  .p {
    display: flex;
    align-items: center;
    justify-content: space-between;
    p {
      width: 100px;
      height: 40px;
      line-height: 40px;
      text-align: center;
    }
    .active {
      background-color: #ec6564;
      color: #fff;
      border-radius: 10px;
    }
    .el-select {
      margin-left: 20px;
    }
  }
  .el-dialog {
    p {
      display: flex;
      span {
        width: 80px;
        line-height: 40px;
      }
      .el-radio {
        line-height: 40px;
      }
      .el-input {
        width: 200px;
      }
    }
    .adoptdBox {
      text-align: center;
      p {
        display: flex;
        justify-content: center;
      }
    }
  }
  .link {
    display: inline-block;
    width: 80px;
    height: 100px;
    background: #ccc;
    padding: 25px 20px;
    i {
      font-size: 40px;
    }
  }
  /deep/ .el-table .cell {
    overflow: visible !important;
  }
  .rgsh {
    display: inline-block;
    height: 40px;
    line-height: 40px;
    margin-left: 20px;
  }
}
</style>